<template>
  <div class="darkhorse">
    <div class="card">
      <div class="card_title">黑马榜单</div>
      <div>
        <a-table
          :columns="columns"
          :rowKey="grounddata => grounddata.user"
          :dataSource="grounddata"
          :loading="loading"
          :pagination="false"
        >
          <div slot="index" slot-scope="text, row,index">
            <span
              class="index"
              :style="{
                backgroundColor:index<3? '#314659':'#f5f5f5',
                color:index<3? '#ffffff':'#101010',
              }">{{ index+1 }}</span>
          </div>
          <div slot="yester_add" slot-scope="text, row">
            <div>
              {{ (row.yester_add).toFixed(2) }}
            </div>
          </div>
          <div slot="before_add" slot-scope="text, row">
            <div>
              {{ (row.before_add).toFixed(2) }}
            </div>
          </div>
          <div slot="perGoals" slot-scope="text, row">
            <div>
              <a-progress
                :percent="parseInt((Number(row.month_orderServiceFee)/Number(row.perGoals))*100)"
                size="small"
                status="active"
                :show-info="false"/>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { getnewpeopledata } from '@/api/rankApi'

  export default {
    name: 'Darkhorse',
    data () {
      return {
        columns: [
          {
            title: '排名',
            align: 'center',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            title: '用户',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '入职时间',
            align: 'center',
            dataIndex: 'useTime',
            scopedSlots: { customRender: 'useTime' }
          },
          {
            title: '前天预估',
            align: 'center',
            dataIndex: 'before_orderServiceFee',
            scopedSlots: { customRender: 'before_orderServiceFee' }
          }, {
            title: '昨天预估',
            align: 'center',
            dataIndex: 'yester_orderServiceFee',
            scopedSlots: { customRender: 'yester_orderServiceFee' }
          },
          {
            title: '昨天增长',
            align: 'center',
            dataIndex: 'yester_add',
            scopedSlots: { customRender: 'yester_add' }
          },
          {
            title: '前天增长',
            align: 'center',
            dataIndex: 'before_add',
            scopedSlots: { customRender: 'before_add' }
          },
          {
            title: '本周预估',
            align: 'center',
            dataIndex: 'bz_orderServiceFee',
            scopedSlots: { customRender: 'bz_orderServiceFee' }
          },
          {
            title: '本月预估',
            align: 'center',
            dataIndex: 'month_orderServiceFee',
            scopedSlots: { customRender: 'month_orderServiceFee' }
          },
          {
            title: '所属小组',
            align: 'center',
            dataIndex: 'group',
            scopedSlots: { customRender: 'group' }
          },
          {
            title: '目标进度',
            align: 'center',
            dataIndex: 'perGoals',
            scopedSlots: { customRender: 'perGoals' }
          }
        ],
        grounddata: [
          // {
          //   user: '杨潘利', // 用户
          //   useTime: '2020-09-17', // 入职时间
          //   perGoals: '10000', // 目标
          //   group: '各艳晴', // 小组
          //   before_orderServiceFee: '95.87', // 前天预估服务费
          //   yester_orderServiceFee: '1768.58', // 昨天预估服务费
          //   max_before_day_orderServiceFee: '2020.11', // 大前天预估服务费
          //   bz_orderServiceFee: '0.00', // 本周预估服务费
          //   month_orderServiceFee: '3884. 56', // 本月预估服务费
          //   yester_add: 1672.71, // 昨天预估增长
          //   before_add: -1924.24// 前天预估增长
          // }

        ],
        loading: false

      }
    },
    computed: {},
    created () {
      this.getnewpeopledata()
    },
    mounted () {

    },
    methods: {
      getnewpeopledata () {
        getnewpeopledata().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.grounddata = res.data
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .darkhorse {
    .card {
      padding: 15px;
    }

    .card_title {
      margin-bottom: 14px;
    }

    .index {
      background-color: #f5f5f5;
      border-radius: 20px;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      /*margin-right: 24px;*/
      height: 20px;
      line-height: 20px;
      width: 20px;
      text-align: center;
    }
  }
</style>
